<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Crea tu primera  tu primera aplicación - (Parte 2)
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c5 {border-width:0}
    li.c4 {list-style: none; display: inline}
    p.c3 {font-style: italic; font-weight: bold}
    p.c2 {font-weight: bold}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/setup/index.html">Configuración</a> &gt; Completando Hello Purr (Parte 2)
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Crea tu primera aplicación (Parte 2): Completando Hello Purr
              </h1>
              <p>
                Ahora que has configurado tu equipo y tu dispositivo, y que has aprendido cómo trabajan el diseñador y el Editor de bloques, estás listo para completar la aplicación HelloPurr. En este punto, debes tener el diseñador abierto en tu navegador, el editor de bloques abierto en otra ventana, y el dispositivo elegido (teléfono o emulador) conectado con el Editor de bloques.
              </p>
              <p>
                Aquí hay una vista previa de los pasos que vas a seguir en este tutorial para completar la aplicación:
              </p><b>En el Diseñador:</b>
              <ul>
                <li>Añadir un componente <em>Label</em> (Etiqueta) que diga "Pet the Kitty".
                </li>
                <li>Subir el archivo meow.mp3
                </li>
                <li>Agregar un componente <em>Sound</em> (Sonido) que reproduzca el archivo meow.mp3.
                </li>
              </ul><b>En el Editor de bloques:</b>
              <ul>
                <li>Crear un <i>controlador de eventos</i> que reproduzca el componente de sonido cuando el usuario pulse el botón.
                </li>
              </ul>
              <h2>
                Añadir la Etiqueta (Label)
              </h2>
              <p class="c2">
                En la <em>Paleta</em>
              </p>
              <ol>
                <li>Arrastra y suelta el componente <span class="ButtonText">Label</span> al <em>Visor</em>, situándolo por debajo del gatito. Aparecerá en la lista de componentes como <i>Label1</i>
                </li>
              </ol>
              <p class="c2">
                En <em>Propiedades</em>
              </p>
              <ol>
                <li>Cambia la propiedad Text de Label1 para que diga "Pet the Kitty". Verás el cambio del texto en el diseñador y en el dispositivo.
                </li>
                <li>Cambia el Color de Fondo (BackgroundColor) de Label1, haciendo clic en el cuadro
                </li>
                <li>Cambia el Color de Texto (TextColor) de Label1
                </li>
                <li>Cambia el Tamaño de la Fuente (FontSize) de Label1 a 30
                </li>
              </ol>El diseñador debería parecerse a esto:
              <div class="imagecontainer">
                <img alt="" src="../../../learn/tutorials/hellopurr/HelloPurrAssets/kittybluebutton.png" width="760">
              </div>
              <h2>
                Añadir el sonido miau
              </h2>
              <p class="c2">
                En la <em>Paleta</em>
              </p>
              <ol>
                <li>Haz clic en la cabecera marcada como <span class="ButtonText">Media</span> para ampliar la sección en la paleta de componentes.
                </li>
                <li>Arrastra un componente <span class="ButtonText">Sound</span> y colócalo en el <em>Visor</em>. Cuando lo coloques, aparecerá en la parte inferior del <em>Visor</em> marcada como <span class="ButtonText">componentes no visibles</span> (Non-visible components).
                </li>
              </ol>
              <p class="c2">
                Bajo <em>Media</em>
              </p>
              <ol>
                <li>Haz clic en <span class="ButtonText">Add...</span> (Agregar ...)
                </li>
                <li>Sube el archivo meow.mp3 a este proyecto.
                </li>
              </ol>
              <p class="c2">
                En <em>Propiedades</em>
              </p>
              <ol>
                <li>Para el componente <span class="ButtonText">Sound1</span> establece su <span class="ButtonText">Origen</span> a meow.mp3.
                </li>
              </ol>El diseñador debería parecerse a esto:
              <div class="imagecontainer">
                <img alt="" src="../../../learn/tutorials/hellopurr/HelloPurrAssets/kittybluebuttonsound.png" width="760">
              </div>
              <h2>
                Reproduciendo el sonido
              </h2>
              <p>
                Con el Editor de bloques vamos a definir la forma de comportarse de la aplicación. Le diremos a los componentes lo que deben hacer y cuándo hacerlo. Vas a decirle al botón del gatito que reproduzca un sonido cuando el usuario lo pulse. Si los componentes son los ingredientes de una receta, puedes pensar en los bloques como las instrucciones para cocinar.
              </p>
              <p>
                El editor de bloques tiene dos fichas en la esquina superior izquierda: <span class="ButtonText">Built-in</span> y <span class="ButtonText">My Blocks</span>. Los botones situados debajo de cada ficha amplían y exponen los bloques cuando se hace clic en ellos. Los <span class="ButtonText">bloques integrados</span> (Built-in) son el conjunto estándar de bloques que están disponibles para cada aplicación a construir. Los bloques debajo de <span class="ButtonText">Mis bloques</span> (My Blocks) contienen bloques específicos que están vinculados con el conjunto de componentes que has elegido para tu aplicación.
              </p>
              <p>
                Para hacer que se reproduzca de sonido, tendrás que arrastrar y soltar el bloque <span class="ButtonText">Button1.Click</span> y el bloque <span class="ButtonText">Sound1.Play</span> al editor. Los bloques se conectan entre sí como piezas de un rompecabezas.
              </p>
              <h4>
                Pasos para reproducir el sonido
              </h4>
              <ol>
                <li>Navega hasta el <em>Editor de bloques</em>. Puede estar cubierto por el navegador web.
                </li>
                <li>Haz clic en la pestaña <span class="ButtonText">My Blocks</span> en la parte superior izquierda.
                </li>
                <li>Haz clic en <span class="ButtonText">Button1</span>.
                </li>
                <li>Arrastra y suelta el bloque <span class="Block">when Button1.Click do</span> al editor.
                </li>
                <li>Haz clic en <span class="ButtonText">Sound1</span>.
                </li>
                <li>Arrastra el bloque <span class="Block">call Sound1.Play</span> en el editor y colócalo en el bloque <span class="Block">when Button1.Click do</span>.
                </li>
                <li>Haz clic en la foto del gatito en tu dispositivo. Debes oír el maullido del gatito.
                </li>
              </ol>Tu Editor de bloques debe parecerse a esto:
              <div class="imagecontainer">
                <img alt="" src="../../../learn/tutorials/hellopurr/HelloPurrAssets/blockseditorwithblocks.png" width="760">
              </div>
              <h2>
                Empaquetando tu aplicación
              </h2>
              <p>
                ¡Felicidades, tu primera aplicación se está ejecutando! Si estás usando un teléfono, entonces la aplicación se esta ejecutando en el teléfono, pero sólo funciona cuando el teléfono está conectado a App Inventor. Si desenchufas el cable USB, la aplicación va a desaparecer. Puedes volver a conectar el teléfono para hacer que vuelva. Para obtener una aplicación que se ejecute sin estar conectada a App Inventor, debes "empaquetar" la aplicación para producir un <em>paquete de aplicación</em> (archivo APK). Al pulsar <span class="ButtonText">Package for Phone</span> (paquete para el teléfono) en la parte superior derecha de la página del diseñador te mostrará tres opciones de embalaje:
              </p>
              <ol>
                <li>Si el teléfono está conectado, puedes descargar e instalar automáticamente la aplicación en tu teléfono.
                </li>
                <li>Puedes descargar la aplicación a tu computadora como un archivo APK, que se puede distribuir y compartir quien quieras, e instalar manualmente en los teléfonos usando el programa Android ADB.
                </li>
                <li>Se puede generar un código de barras, que se puede utilizar para instalar la aplicación en tu teléfono con la ayuda de un escáner de código de barras, como el escáner de código de barras ZXing (disponible gratuitamente en el Android Market). Este código de barras funciona sólo para tu propio teléfono. Si deseas compartir la aplicación con los demás, tendrás que descargar el archivo APK a tu ordenador y compartir el archivo.
                </li>
              </ol>
              <h2>
                Revisión
              </h2>
              <p>
                Estas son las ideas clave recogidas hasta el momento:
              </p>
              <ul>
                <li>
                  <p>
                    Construyes aplicaciones mediante la selección de los componentes (ingredientes) y luego diciéndoles qué hacer y cuándo hacerlo.
                  </p>
                </li>
                <li>
                  <p>
                    Se utiliza el <em>Diseñador</em> para seleccionar los componentes. Algunos componentes son visibles y otros no.
                  </p>
                </li>
                <li>
                  <p>
                    Puedes agregar los medios (imágenes y sonidos) para las aplicaciones cargándolos desde tu ordenador.
                  </p>
                </li>
                <li>
                  <p>
                    Utilizas el Editor de bloques para ensamblar los bloques que definen el comportamiento de los componentes
                  </p>
                </li>
                <li>
                  <p>
                    Los bloques <span class="block">when ... do ...</span> (cuando... hacer...) definen  <em>controladores de eventos</em>, que dicen a los componentes que hacer <em>cuando</em> algo sucede.
                  </p>
                </li>
                <li>
                  <p>
                    Los bloques <span class="block">call ...</span> (llamar a ...) indican a los componentes que cosas hacer.
                  </p>
                </li>
              </ul>
              <h2>
                Próximos pasos
              </h2>
              <p>
                Ahora que tu equipo está configurado y conoces los fundamentos de cómo funciona App Inventor, te sugerimos:
              </p>
              <ul>
                <li>Completa los <a href="../../../learn/tutorials/index.html">Tutoriales</a>adicionales.
                </li>
                <li>Revisa la <a href="../../../learn/reference/index.html">Documentación de referencia.</a>.
                </li>
                <li>Únete al <a href="../../../forum/index.html">Foro de discusión de usuarios.</a>.
                </li>
                <li class="c4">
                  <p class="c3">
                    O
                  </p>
                </li>
                <li>Si has estado usando el emulador y deseas comenzar a utilizar tu teléfono, puedes <a href="../../../learn/setup/phone.html">configurar</a> tu teléfono Android para crear aplicaciones..
                </li>
                <li class="c4">
                  <blockquote class="notice">
                    ¿Algo no funciona bien? Visita la <a href="../../../learn/troubleshooting.html">página de solución de problemas</a>, o comprueba el <a href="../../../forum/index.html">Foro de usuarios de App Inventor</a> en busca de ayuda.
                  </blockquote>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c5" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              El trabajo original de Google se ha modificado<br>
              El trabajo modificado se ha traducido del Ingles al Español<br>
              <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
